<template>
    <div id="myTeam">
      <el-container>
        <el-header>
          <el-page-header @back="goBack" content="我的团队" style="margin-top: 15px">
          </el-page-header>
        </el-header>
        <el-container>
          <el-aside width="350px">
            <el-row class="tac">
              <el-col :span="12">
                <el-menu
                  default-active="activeIndex"
                  class="el-menu-vertical-demo"
                  @select="handleSelect"
                  @open="handleOpen"
                  @close="handleClose">
                  <el-menu-item index="/createTeam">
                    <template slot="title">
                      <i class="el-icon-location"></i>
                      <span>创建队伍</span>
                    </template>

                  </el-menu-item>
                  <el-menu-item index="/teamInformation">
                    <i class="el-icon-menu"></i>
                    <span slot="title">队伍信息</span>
                  </el-menu-item>
                  <el-menu-item index="3" disabled>
                    <i class="el-icon-document"></i>
                    <span slot="title">角色管理</span>
                  </el-menu-item>
                  <el-menu-item index="/entryTeamReq" :disabled = this.$store.state.entryTeamReq_isShow>
                    <i class="el-icon-setting"></i>
                    <span slot="title">入队请求</span>
                  </el-menu-item>
                  <el-menu-item index="/invitePlayer">
                    <i class="el-icon-circle-plus-outline"></i>
                    <span slot="title">邀请成员</span>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>

          </el-aside>

          <el-main>
            <transition mode="out-in"
                        enter-active-class="animate__animated animate__backInDown"
                        leave-active-class="animate__animated animate__backOutDown">
              <router-view/>
            </transition>
          </el-main>
        </el-container>
      </el-container>


    </div>
</template>

<script>
  import Axios from "axios";

  const instance = Axios.create({
    baseURL: 'http://localhost:8081/api/pri/team',
    timeout: 5000,
  })


    export default {
        name: "myTeam",
        created() {
          this.findUserIsExistTeamAndIsCaptain();
        },


      data(){
          return{
            activeIndex: this.$route.path,

          }
        },
        methods:{

          handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          },
          handleSelect(key, keyPath) {
            console.log(key, keyPath);
            this.$router.push(key);
          },


          goBack() {
            this.$router.push('/loginAfterIndex');
            console.log('go back');
          },

          onSubmit() {
            console.log('submit!');
          },

          findUserIsExistTeamAndIsCaptain(){
            const Qs = require('qs');
            instance.post('finTeamByUserId',Qs.stringify({userId:window.localStorage.getItem('userId')}))
              .then(res=>{
                if (res.data != null){
                  instance.post('finTeamByTeamId',Qs.stringify({userId:res.data.teamId}))
                  .then(res2=>{
                    window.localStorage.setItem('captainId',res2.data.data.captain.userId);
                  })
                  //如果有团队直接禁用创建团队功能
                  this.$store.commit('updateCreateTeam_isShow',true);
                  this.$store.commit('updateAll_teamId',res.data.teamId);
                  if (window.localStorage.getItem('userId') === window.localStorage.getItem('captainId')){
                    this.$message({
                      message:"你好，队长！欢迎来的我的团队界面！",
                      type: 'success'
                    })

                  }
                  else{
                    //队员没有入队功能因此直接禁用该功能
                    this.$store.commit('updateEntryTeamReq_isShow',true);
                    this.$message({
                      message:"你好，队员！欢迎来的我的团队界面！",
                      type: 'success'
                    });

                  }

                  this.$router.push( '/teamInformation');
                }
              })
          }
        }
    }
</script>

<style scoped>

</style>
